<template>
  <div id="indicatorReference">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-document-checked" @click="clickAdd">增加</el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-document-checked"
          @click="clickDelete"
        >删除</el-button>
        <el-button size="small" @click="getList(basicData)">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        @selection-change="selectTable"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="sortValue" label="指标排序" />
        <el-table-column align="center" prop="experimentCode.data" label="实验项目" />
        <el-table-column align="center" prop="indicatorCode" label="指标代码" />
        <el-table-column align="center" prop="indicatorCodeName" label="指标名称" />
        <el-table-column align="center" prop="highHint" label="高位提示" />
        <el-table-column align="center" prop="highHintCode" label="高位提示代码" />
        <el-table-column align="center" prop="lowHint" label="低位提示" />
        <el-table-column align="center" prop="lowHintCode" label="低位提示代码" />
        <el-table-column align="center" prop="maxValue" label="范围值-最大" />
        <el-table-column align="center" prop="minValue" label="范围值-最小" />
        <el-table-column align="center" prop="normalHint" label="结果提示" />
        <el-table-column align="center" prop="normalHintCode" label="结果提示代码" />
        <el-table-column align="center" prop="referenceValue" label="参考值" />
        <el-table-column align="center" prop="units" label="单位" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="slot, total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增 -->
    <el-dialog :visible.sync="addShow" width="40%" title="新增">
      <el-form
        ref="projectManageForm"
        :model="addData"
        :rules="addDataRules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="实验项目:"
              prop="projectIdList"
              class="experimentCode.key"
              id="xiangmu"
            >
              <el-radio-group v-model="addData.experimentCode.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标名称" prop="indicatorCodeName">
              <el-input size="mini" v-model="addData.indicatorCodeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标代码" prop="indicatorCode">
              <el-input size="mini" v-model="addData.indicatorCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高位提示" prop="highHint">
              <el-input size="mini" v-model="addData.highHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高位提示代码" prop="highHintCode">
              <el-input size="mini" v-model="addData.highHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="低位提示" prop="lowHint">
              <el-input size="mini" v-model="addData.lowHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="低位提示代码" prop="lowHintCode">
              <el-input size="mini" v-model="addData.lowHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="范围值-最大" prop="maxValue">
              <el-input size="mini" v-model="addData.maxValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="范围值-最小" prop="minValue">
              <el-input size="mini" v-model="addData.minValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结果提示" prop="normalHint">
              <el-input size="mini" v-model="addData.normalHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结果提示代码" prop="normalHintCode">
              <el-input size="mini" v-model="addData.normalHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参考值" prop="referenceValue">
              <el-input size="mini" v-model="addData.referenceValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标排序" prop="sortValue">
              <el-input size="mini" v-model="addData.sortValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单位" prop="units">
              <el-input size="mini" v-model="addData.units" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="40%" title="修改">
      <el-form
        ref="projectManageForm"
        :model="editData"
        :rules="addDataRules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="实验项目:"
              prop="projectIdList"
              class="experimentCode.key"
              id="xiangmu"
            >
              <el-radio-group v-model="editData.experimentCode.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标名称" prop="indicatorCodeName">
              <el-input size="mini" v-model="editData.indicatorCodeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标代码" prop="indicatorCode">
              <el-input size="mini" v-model="editData.indicatorCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高位提示" prop="highHint">
              <el-input size="mini" v-model="editData.highHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="高位提示代码" prop="highHintCode">
              <el-input size="mini" v-model="addData.highHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="低位提示" prop="lowHint">
              <el-input size="mini" v-model="editData.lowHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="低位提示代码" prop="lowHintCode">
              <el-input size="mini" v-model="addData.lowHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="范围值-最大" prop="maxValue">
              <el-input size="mini" v-model="editData.maxValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="范围值-最小" prop="minValue">
              <el-input size="mini" v-model="editData.minValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结果提示" prop="normalHint">
              <el-input size="mini" v-model="editData.normalHint" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结果提示代码" prop="normalHintCode">
              <el-input size="mini" v-model="addData.normalHintCode" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参考值" prop="referenceValue">
              <el-input size="mini" v-model="editData.referenceValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标排序" prop="sortValue">
              <el-input size="mini" v-model="editData.sortValue" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="单位" prop="units">
              <el-input size="mini" v-model="editData.units" placeholder="输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickEditSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import QualityManageApi from "@/api/QualityManage.js";
import { initDicts } from "@/utils/commons";
export default {
  data() {
    return {
      // 转菊花
      loading: false,
      // 增加弹窗
      addShow: false,
      // 修改弹窗
      editShow: false,
      // 总数
      total: 0,
      // 表格数据
      tableData: [],
      // 选中数据
      selectList: [],
      // 弹窗form表单数据
      basicData: {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentCode: {
            data: "",
            key: ""
          },
          indicatorMethod: {
            data: "",
            key: ""
          },
          indicatorProperty: {
            data: "",
            key: ""
          },
          name: ""
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      addData: {
        experimentCode: {
          data: "",
          key: ""
        },
        highHint: "",
        highHintCode: "",
        lowHintCode: "",
        normalHintCode: "",
        indicatorCode: "",
        indicatorCodeName: "",
        lowHint: "",
        maxValue: "",
        minValue: "",
        normalHint: "",
        referenceValue: "",
        sortValue: "",
        units: ""
      },
      // 修改数据
      editData: {
        experimentCode: {
          data: "",
          key: ""
        },
        highHint: "",
        highHintCode: "",
        lowHintCode: "",
        normalHintCode: "",
        indicatorCode: "",
        indicatorCodeName: "",
        lowHint: "",
        maxValue: "",
        minValue: "",
        normalHint: "",
        referenceValue: "",
        sortValue: "",
        units: ""
      },
      addDataRules: {
        "experimentCode.key": [
          { required: true, message: "   ", trigger: "change" }
        ],
        indicatorCodeName: [
          { required: true, message: "   ", trigger: "change" }
        ],
        indicatorCode: [{ required: true, message: "   ", trigger: "change" }],
        highHint: [{ required: true, message: "   ", trigger: "change" }],
        highHintCode: [{ required: true, message: "   ", trigger: "change" }],
        lowHintCode: [{ required: true, message: "   ", trigger: "change" }],
        normalHintCode: [{ required: true, message: "   ", trigger: "change" }],
        lowHint: [{ required: true, message: "   ", trigger: "change" }],
        maxValue: [{ required: true, message: "   ", trigger: "change" }],
        minValue: [{ required: true, message: "   ", trigger: "change" }],
        normalHint: [{ required: true, message: "   ", trigger: "change" }],
        referenceValue: [{ required: true, message: "   ", trigger: "change" }],
        sortValue: [{ required: true, message: "   ", trigger: "change" }],
        units: [{ required: true, message: "   ", trigger: "change" }]
      },
      // 字典
      dicts: {
        INDICATOR_METHOD: {}, //质控方法
        EXPERIMENT_CODE: {}, //项目
        INDICATOR_PROPERTY: {} //类型
      }
    };
  },
  mounted() {
    initDicts(
      ["INDICATOR_METHOD", "INDICATOR_PROPERTY", "EXPERIMENT_CODE"],
      this.dicts
    );
    this.getList(this.basicData);
  },
  methods: {
    selectTable(v) {
      this.selectList = v;
    },
    // 获取数据
    getList(data) {
      this.loading = true;
      QualityManageApi.indicatorReference.page(data).then(res => {
        if (res.status == "200") {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 点击增加
    clickAdd() {
      this.addData = {
        experimentCode: {
          data: "",
          key: ""
        },
        highHint: "",
        indicatorCode: "",
        indicatorCodeName: "",
        lowHint: "",
        maxValue: "",
        minValue: "",
        normalHint: "",
        referenceValue: "",
        sortValue: "",
        units: ""
      };
      this.addShow = true;
    },
    // 点击修改
    clickEdit(v) {
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
    },
    // 点击删除
    clickDelete() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (this.selectList.length == 0) {
          this.$message.error("请选择要删除的数据");
          return;
        }
        let index = 0;
        this.selectList.forEach(item => {
          QualityManageApi.indicatorReference
            .delete({ "ids[]": item.id })
            .then(res => {
              if (res.status == "200") {
                index++;
                if (index == this.selectList.length) {
                  this.getList(this.basicData);
                  this.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                }
              } else {
                this.$message.error(res.statusText);
              }
            });
        });
      });
    },
    // 新增保存
    clickSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.indicatorReference.add(this.addData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: res.statusText
              });
              this.getList(this.basicData);
              this.addShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 修改保存
    clickEditSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.indicatorReference.edit(this.editData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: "修改成功!"
              });
              this.getList(this.basicData);
              this.editShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#indicatorReference {
  #xiangmu {
    .el-form-item__content {
      height: 40px;
    }
  }
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  @media screen and (max-width: 1250px) {
    .el-dialog__body {
      padding-top: 30vh;
    }
  }

  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
